<template>
    <view class="uni-goods-nav">
        <!-- 底部占位 -->
        <view class="uni-tab__seat"/>
        <view class="uni-tab__cart-box flex">
            <view class="flex uni-tab__cart-sub-left">
                <view v-for="(item,index) in options" :key="index"
                      class="flex uni-tab__cart-button-left uni-tab__shop-cart" @click="onClick(index,item)">
                    <view class="uni-tab__icon">
                        <uni-icons :type="item.icon" size="20" color="#646566"></uni-icons>
                        <!-- <image class="image" :src="item.icon" mode="widthFix" /> -->
                    </view>
                    <text class="uni-tab__text">{{ item.text }}</text>
                    <view class="flex uni-tab__dot-box">
                        <text v-if="item.info" :class="{ 'uni-tab__dots': item.info > 9 }" class="uni-tab__dot "
                              :style="{'backgroundColor':item.infoBackgroundColor?item.infoBackgroundColor:'#ff0000',
						color:item.infoColor?item.infoColor:'#fff'
						}">{{ item.info }}
                        </text>
                    </view>
                </view>
            </view>
            <view :class="{'uni-tab__right':fill}" class="flex uni-tab__cart-sub-right ">
                <view v-for="(item,index) in buttonGroup" :key="index"
                      :style="{background:item.backgroundColor,color:item.color}"
                      class="flex uni-tab__cart-button-right" @click="buttonClick(index,item)">
                    <text :style="{color:item.color}" class="uni-tab__cart-button-right-text">{{ item.text }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        initVueI18n
    } from '@dcloudio/uni-i18n'
    import messages from './i18n/index.js'

    const {t} = initVueI18n(messages)
    /**
     * GoodsNav 商品导航
     * @description 商品加入购物车、立即购买等
     * @tutorial https://ext.dcloud.net.cn/plugin?id=865
     * @property {Array} options 组件参数
     * @property {Array} buttonGroup 组件按钮组参数
     * @property {Boolean} fill = [true | false] 组件按钮组参数
     * @event {Function} click 左侧点击事件
     * @event {Function} buttonClick 右侧按钮组点击事件
     * @example <uni-goods-nav :fill="true"  options="" buttonGroup="buttonGroup"  @click="" @buttonClick="" />
     */
    export default {
        name: 'UniGoodsNav',
        emits: ['click', 'buttonClick'],
        props: {
            options: {
                type: Array,
                default() {
                    return [{
                        icon: 'shop',
                        text: t("uni-goods-nav.options.shop"),
                    }, {
                        icon: 'cart',
                        text: t("uni-goods-nav.options.cart")
                    }]
                }
            },
            buttonGroup: {
                type: Array,
                default() {
                    return [{
                        text: t("uni-goods-nav.buttonGroup.addToCart"),
                        backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
                        color: '#fff'
                    },
                        {
                            text: t("uni-goods-nav.buttonGroup.buyNow"),
                            backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
                            color: '#fff'
                        }
                    ]
                }
            },
            fill: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            onClick(index, item) {
                this.$emit('click', {
                    index,
                    content: item,
                })
            },
            buttonClick(index, item) {
                if (uni.report) {
                    uni.report(item.text, item.text)
                }
                this.$emit('buttonClick', {
                    index,
                    content: item
                })
            }
        }
    }
</script>

<style lang="scss">
    .flex {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
    }

    .uni-goods-nav {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex: 1;
        flex-direction: row;
    }

    .uni-tab__cart-box {
        flex: 1;
        height: 50px;
        background-color: #fff;
        z-index: 900;
    }

    .uni-tab__cart-sub-left {
        padding: 0 5px;
    }

    .uni-tab__cart-sub-right {
        flex: 1;
    }

    .uni-tab__right {
        margin: 5px 0;
        margin-right: 10px;
        border-radius: 100px;
        overflow: hidden;
    }

    .uni-tab__cart-button-left {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        // flex: 1;
        position: relative;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 0 10px;
        /* #ifdef H5 */
        cursor: pointer;
        /* #endif */
    }

    .uni-tab__icon {
        width: 18px;
        height: 18px;
    }

    .image {
        width: 18px;
        height: 18px;
    }

    .uni-tab__text {
        margin-top: 3px;
        font-size: 12px;
        color: #646566;
    }

    .uni-tab__cart-button-right {
        /* #ifndef APP-NVUE */
        display: flex;
        flex-direction: column;
        /* #endif */
        flex: 1;
        justify-content: center;
        align-items: center;
        /* #ifdef H5 */
        cursor: pointer;
        /* #endif */
    }

    .uni-tab__cart-button-right-text {
        font-size: 14px;
        color: #fff;
    }

    .uni-tab__cart-button-right:active {
        opacity: 0.7;
    }

    .uni-tab__dot-box {
        /* #ifndef APP-NVUE */
        display: flex;
        flex-direction: column;
        /* #endif */
        position: absolute;
        right: -2px;
        top: 2px;
        justify-content: center;
        align-items: center;
        // width: 0;
        // height: 0;
    }

    .uni-tab__dot {
        // width: 30rpx;
        // height: 30rpx;
        padding: 0 4px;
        line-height: 15px;
        color: #ffffff;
        text-align: center;
        font-size: 12px;
        background-color: #ff0000;
        border-radius: 15px;
    }

    .uni-tab__dots {
        padding: 0 4px;
        // width: auto;
        border-radius: 15px;
    }
</style>
